<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM对象</title>
    <!-- DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 -->
    <style>
        .active {
            color: red;
            font-size: 160px;
            text-align: center;
        }

        h2 {
            color: red;
            font-size: 160px;
            text-align: center;
        }
    </style>
</head>

<body>

    <h2>ALL SB</h2>
    <p title="问你呢">你说啥？</p>
    <ul id="namelist">
        <li class="item">FYR</li>
        <li class="item">ZMM</li>
        <p>FYR</p>
        <p>FYR1</p>
        <li>XXX</li>
    </ul>
    <a href="">cnm</a>
    <div id="box">
        <p id="cm">FYR</p>
    </div>



    <script>
        // 获取元素节点：
        // var eleNode1 = document.getElementById('namelist');//通过id
        // var eleNode2 = document.getElementsByTagName('li');//通过标签名
        // var eleNode3 = document.getElementsByClassName('item')//通过类名

        // var ele_p = document.getElementsByTagName('p')[0];
        // var tit = ele_p.getAttribute('title') //获取属性值
        // console.log(tit);

        // var ele_p = document.getElementsByTagName('p')[0];
        // ele_p.setAttribute('id','box'); //获取属性值

        // var Father = document.getElementById('namelist');
        // Father.childNodes;//获取所有孩子节点，会包含换行符。
        // Father.firstChild;//获取第一个p标签
        // Father.lastChild;//最后一个。
        // Father.parentNode;//父亲节点
        // Father.nextSibling;//下个兄弟节点
        // Father.previousSibling;//上个兄弟节点

        //封装函数--获取所有孩子节点
        // function get_chileNodes(tage_name){
        //     var name = document.getElementById(tage_name)
        //     var nodes = name.childNodes;
        //     var arr = [];
        //     for(var i=0;i < nodes.length;i++)
        //         if(nodes[i].nodeType === 1){
        //             arr.push(nodes[i]);
        //         }
        //     return arr
        // }
        // var x = get_chileNodes('namelist')
        // console.log(x)

        //函数封装---获取下一个节点
        // function get_nextSibling(tage_name){
        //     var name = document.getElementById(tage_name).nextSibling;
        //     while(name && name.nodeType != 1){
        //         name = name.nextSibling;
        //     }
        //     return name;
        // }
        // var y = get_nextSibling('namelist')
        // console.log(y)

        //节点操作方法
        //1、创建节点 createElemengt
        var odiv = document.getElementById('box')
        var newNode = document.createElement('p')
        newNode.setAttribute('class', 'active')
        odiv.appendChild(newNode)
        var textNode = document.createTextNode('ZMQQQ')
        newNode.appendChild(textNode)
        //快速插入内容
        newNode.innerHTML = '没一个正常玩意'//可以渲染标签。
        newNode.innerText = '<h1>sb</h1>' //不会渲染标签。
        newNode = null; //释放这个节点对象，之后可以继续使用这个newNode插入其他标签。
        //2、插入节点 appendChild()  insertBefore(newNode,node)
        //3、删除节点 removeChild()
        //4、替换节点replaceChild(newNode,node)
        //5、创建文本节点 createTextNode()

        //操作样式 会把所有样式加到行内
        var op = document.getElementById('cm')
        op.style.backgroundColor = 'skyblue'
        









    </script>










</body>

</html>